<template>
  <div>
    <van-tabbar v-model="active" style="padding-bottom: 3px;" active-color="#FF0C4E" class="active_tab">
      <van-tabbar-item v-for="(item, index) in tabbars" :key="index" @click="tabClick(index)">
        <span v-if="item.name!='playGame'" style="margin-top: -4px; display: block;">{{item.title}}</span>
        <template slot="icon" slot-scope="props">
          <img v-if="item.name!='playGame'" style="width:28px;height:28px;" :src="props.active ? item.active : item.normal">
          <img v-else style="width:40px;height:40px;margin-top: 10px;" :src="item.active">
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>

import {  Tabbar, TabbarItem} from 'vant';
import {mapActions,mapState} from 'vuex'
export default {
  name: 'homeIndex',
  components:{
    [Tabbar.name]:Tabbar,
    [TabbarItem.name]:TabbarItem,
  },
  data () {
    return {
       // active:0
    }
  },
  computed: {
    active:{
      get(){
        return this.$store.state.active
      },
      set(val){}
    },
    tabbars() {
      return [{
          name: "/",
          title: "首页",
          normal: require("../assets/img/bottom-icon-homeRegular.svg"),
          active: require("../assets/img/bottom-icon-homeClick.svg")
        },
        {
          name: "message",
          title: "资讯",
          normal: require("../assets/img/bottom-icon-newsRegular.svg"),
          active: require("../assets/img/bottom-icon-newsClick.svg")
        },
        {
          name: "playGame",
          normal: require("../assets/img/bottom-icon-play@3x.png"),
          active: require("../assets/img/bottom-icon-play@3x.png")
        },
        {
          name: "game",
          title: "游戏",
          normal: require("../assets/img/bottom-icon-gameRegular.svg"),
          active: require("../assets/img/bottom-icon-gameClick.svg")
        },
        {
          name: "personalCenter",
          title: "个人",
          normal: require("../assets/img/bottom-icon-personalRegular.svg"),
          active: require("../assets/img/bottom-icon-personalClick.svg")
        },
      ]
    }
  },
  methods: {
    // ...mapActions(['updataActive']),
    tabClick(index){
      // this.updataActive(index);
      this.$store.dispatch('updataActive',index)
      if(index===0) {
        this.$router.push("/");
      }
      if(index===1) {
        this.$router.push("/informationPage");
      }
      if(index===2) {
        if(localStorage.getItem('user_id')){
          this.$router.push("/playGame");
        }else{
          this.$router.push('/login')
        }
      }
      if(index===3) {
        this.$router.push("/gamePage");
      }
      if(index===4) {
        this.$router.push("/personalCenter");
      }
    },
  },
  mounted() {
    // alert( "uuid: "+plus.device.uuid );
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
